<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#dropArea {
				background-color: #DDDDDD;
				border: 3px dashed #000000;
				float: left;
				font-size: 48px;
				font-weight: bold;
				height: 530px;
				line-height: 530px;
				margin: 20px;
				position: relative;
				text-align: center;
				width: 300px;
			}

			#dropArea.hover {
				background-color: #CCCCCC;
			}

			#dropArea.uploading {
				background: #EEEEEE url(loading.gif) center 30% no-repeat;
			}
		</style>
	</head>

	<body>
		<div id="dropArea">文件拖到这里</div>
		<canvas width="500" height="20"></canvas>
		<script type="text/javascript">
			// variables
			var dropArea = document.getElementById('dropArea');
			var canvas = document.querySelector('canvas');
			var context = canvas.getContext('2d');
			var count = document.getElementById('count');
			var destinationUrl = document.getElementById('url');
			var result = document.getElementById('result');
			var list = [];
			var totalSize = 0;
			var totalProgress = 0;

			// main initialization
			(function() {

				// init handlers
				function initHandlers() {
					dropArea.addEventListener('drop', handleDrop, false);
					dropArea.addEventListener('dragover', handleDragOver, false);
				}

				// draw progress
				function drawProgress(progress) {
					context.clearRect(0, 0, canvas.width, canvas.height); // clear context

					context.beginPath();
					context.strokeStyle = '#4B9500';
					context.fillStyle = '#4B9500';
					context.fillRect(0, 0, progress * 500, 20);
					context.closePath();

					// draw progress (as text)
					context.font = '16px Verdana';
					context.fillStyle = '#000';
					context.fillText('上传进度: ' + Math.floor(progress * 100) + '%', 50, 15);
				}
				http: //www.huiyi8.com/huawen/​

					// drag over花纹
					function handleDragOver(event) {
						event.stopPropagation();
						event.preventDefault();

						dropArea.className = 'hover';
					}

				// drag drop
				function handleDrop(event) {
					event.stopPropagation();
					event.preventDefault();

					processFiles(event.dataTransfer.files);
				}

				// process bunch of files
				function processFiles(filelist) {
					if (!filelist || !filelist.length || list.length) return;

					totalSize = 0;
					totalProgress = 0;
					result.textContent = '';

					for (var i = 0; i < filelist.length && i < 5; i++) {
						list.push(filelist[i]);
						totalSize += filelist[i].size;
					}
					uploadNext();
				}

				// on complete - start next file
				function handleComplete(size) {
					totalProgress += size;
					drawProgress(totalProgress / totalSize);
					uploadNext();
				}

				// update progress
				function handleProgress(event) {
					var progress = totalProgress + event.loaded;
					drawProgress(progress / totalSize);
				}

				// upload file
				function uploadFile(file, status) {

					// prepare XMLHttpRequest
					var xhr = new XMLHttpRequest();
					xhr.open('POST', destinationUrl.value);
					xhr.onload = function() {
						result.innerHTML += this.responseText;
						handleComplete(file.size);
					};
					xhr.onerror = function() {
						result.textContent = this.responseText;
						handleComplete(file.size);
					};
					xhr.upload.onprogress = function(event) {
						handleProgress(event);
					}
					xhr.upload.onloadstart = function(event) {}

					// prepare FormData
					var formData = new FormData();
					formData.append('myfile', file);
					xhr.send(formData);
				}

				// upload next file
				function uploadNext() {
					if (list.length) {
						count.textContent = list.length - 1;
						dropArea.className = 'uploading';

						var nextFile = list.shift();
						if (nextFile.size >= 262144) { // 256kb
							result.innerHTML += '<div class="f">文件过大 (max filesize exceeded)</div>';
							handleComplete(nextFile.size);
						} else {
							uploadFile(nextFile, status);
						}
					} else {
						dropArea.className = '';
					}
				}

				initHandlers();
			})();
		</script>
	</body>

</html>
